import React from 'react';
import { Card, Row, Col, Input, Select, DatePicker, Button, Space } from 'antd';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
import { CHECKIN_TYPE_OPTIONS, CHECKIN_STATUS_OPTIONS } from '../../views/Checkin/CheckType';

const { Search } = Input;
const { Option } = Select;
const { RangePicker } = DatePicker;

/**
 * 通用搜索表单组件
 * @param {Object} props - 组件属性
 * @param {Object} props.searchParams - 搜索参数
 * @param {Function} props.onSearch - 搜索回调
 * @param {Function} props.onReset - 重置回调
 * @param {Array} props.searchFields - 搜索字段配置
 * @param {Object} props.layout - 布局配置
 * @returns {JSX.Element} 搜索表单组件
 */
const SearchForm = ({
  searchParams = {},
  onSearch,
  onReset,
  searchFields = [],
  layout = { gutter: 16, span: 6 },
  showSearchButton = true,
  showResetButton = true,
}) => {
  // 默认搜索字段
  const defaultFields = [
    {
      key: 'keywords',
      type: 'search',
      placeholder: '搜索关键词',
      span: layout.span,
    },
    {
      key: 'type',
      type: 'select',
      placeholder: '活动类型',
      options: CHECKIN_TYPE_OPTIONS,
      span: layout.span,
    },
    {
      key: 'status',
      type: 'select',
      placeholder: '活动状态',
      options: CHECKIN_STATUS_OPTIONS,
      span: layout.span,
    },
    {
      key: 'dateRange',
      type: 'dateRange',
      placeholder: ['开始日期', '结束日期'],
      span: layout.span * 1.5,
    },
  ];

  const fields = searchFields.length > 0 ? searchFields : defaultFields;

  // 渲染搜索字段
  const renderField = (field) => {
    const { key, type, placeholder, options, span, ...rest } = field;

    switch (type) {
      case 'search':
        return (
          <Search
            placeholder={placeholder}
            value={searchParams[key]}
            onChange={(e) => onSearch({ ...searchParams, [key]: e.target.value })}
            onSearch={() => onSearch(searchParams)}
            {...rest}
          />
        );
      
      case 'select':
        return (
          <Select
            placeholder={placeholder}
            value={searchParams[key]}
            onChange={(value) => onSearch({ ...searchParams, [key]: value })}
            allowClear
            style={{ width: '100%' }}
            {...rest}
          >
            {options?.map(option => (
              <Option key={option.value} value={option.value}>
                {option.label}
              </Option>
            ))}
          </Select>
        );
      
      case 'dateRange':
        return (
          <RangePicker
            placeholder={placeholder}
            value={searchParams[key]}
            onChange={(dates) => onSearch({ ...searchParams, [key]: dates })}
            style={{ width: '100%' }}
            {...rest}
          />
        );
      
      case 'date':
        return (
          <DatePicker
            placeholder={placeholder}
            value={searchParams[key]}
            onChange={(date) => onSearch({ ...searchParams, [key]: date })}
            style={{ width: '100%' }}
            {...rest}
          />
        );
      
      case 'input':
        return (
          <Input
            placeholder={placeholder}
            value={searchParams[key]}
            onChange={(e) => onSearch({ ...searchParams, [key]: e.target.value })}
            {...rest}
          />
        );
      
      default:
        return null;
    }
  };

  // 处理搜索
  const handleSearch = () => {
    // 构建搜索参数，将时间区间拆分为开始和结束时间
    const params = { ...searchParams };
    
    if (params.dateRange && Array.isArray(params.dateRange) && params.dateRange.length === 2) {
      params.startDate = params.dateRange[0]?.format('YYYY-MM-DD');
      params.endDate = params.dateRange[1]?.format('YYYY-MM-DD');
      // 移除dateRange字段，避免传递给后端
      delete params.dateRange;
    }
    
    onSearch(params);
  };

  // 处理重置
  const handleReset = () => {
    onReset();
  };

  return (
    <Card style={{ marginBottom: 24 }}>
      <Row gutter={layout.gutter} align="middle">
        {fields.map((field, index) => (
          <Col key={field.key || index} span={field.span || layout.span}>
            {renderField(field)}
          </Col>
        ))}
        
        {(showSearchButton || showResetButton) && (
          <Col span={layout.span}>
            <Space>
              {showSearchButton && (
                <Button 
                  type="primary" 
                  icon={<SearchOutlined />}
                  onClick={handleSearch}
                >
                  搜索
                </Button>
              )}
              {showResetButton && (
                <Button 
                  icon={<ReloadOutlined />}
                  onClick={handleReset}
                >
                  重置
                </Button>
              )}
            </Space>
          </Col>
        )}
      </Row>
    </Card>
  );
};

export default SearchForm; 